<!--  -->
<script setup>
import { ref } from 'vue'
import Menu from '@/components/Menu.vue'
import { useUserStore } from '@/stores'

const userInfo = useUserStore().getUserInfo()

const dirs = ref([
  {
    id: 0,
    title: '我的资料',
    // icon: 'chat',
    multi: false,
    path: '/users/settings/profile'
  }, {
    id: 1,
    title: '通知',
    // icon: 'tag',
    multi: false,
    path: '/users/settings/notify'
  }, {
    id: 3,
    title: '账号',
    // icon: 'cat1',
    multi: false,
    path: '/users/settings/account'
  }
])
</script>


<template>
  <div v-if="userInfo" class="layout-container">
    <div class="left-wrapper">
      <Menu :dirs="dirs"> </Menu>
    </div>
    <div class="main-wrapper">
      <RouterView :userInfo />
    </div>
  </div>
  <div v-else>not login</div>
</template>

<style lang="scss" scoped>
.layout-container {
  display: flex;
  flex: 1;
  background-color: var(--site-bgc);
}

.sticky {
  overflow-y: auto;
  top: 26px;
  position: sticky;
  z-index: 90;
  height: 100%;
}

.left-wrapper {}

.main-wrapper {
  flex: 1;
  background-color: #F9FBF0;
}
</style>
